<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <link rel="stylesheet" th:href="@{/css/common.css}">
    <link rel="stylesheet" th:href="@{/css/animate.min.css}">
    <style>

        /* 卡片标题加粗 */
        .layui-card-header {
            font-weight: bold;
        }

        /* 表格字体颜色 */
        .layui-table {
            color: #252525;
        }

        /* 表格字体大小 */
        .layui-table td, .layui-table th {
            font-size: 13px;
        }

        /* 标题列加粗 */
        .layui-table th {
            font-weight: bold;
        }

        /* 表头背景颜色 */
        .layui-table thead tr {
            background: white;
        }

        /* 去除表格外边框 */
        .layui-table[lay-skin=line] {
            border-style: none;
        }
        
        .text-danger{
        	color:#FF5722 !important;
        }
        
        .c1 td,.c1 th{
        	text-align: center;
        }

    </style>
</head>

<body class="animated fadeIn">

    <div class="page-loading">
        <div class="rubik-loader"></div>
    </div>

    <div style="padding: 20px; background-color: #f3f3f3;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">CPU</div>
                    <div class="layui-card-body">
                        <table class="layui-table c1" lay-skin="line">
                            <!--  <thead>
                                <tr>
                                    <th>属性</th>
                                    <th>值</th>
                                </tr>
                            </thead>-->
                            <tbody>
                            	<tr>
                                    <td>型  号</td>
                                    <td th:text="${server.cpu.cpuName}"></td>
                                </tr>
                                <tr>
                                    <td>核心数</td>
                                    <td th:text="${server.cpu.cpuNum}"></td>
                                </tr>
                                <tr>
                                    <td>用户使用率</td>
                                    <td id="cpuUsed" th:class="${server.cpu.used gt 80} ? 'text-danger'" th:text="${server.cpu.used} + '%'"></td>
                                </tr>
                                <tr>
                                    <td>系统使用率</td>
                                    <td id="cpuSys" th:class="${server.cpu.sys gt 80} ? 'text-danger'" th:text="${server.cpu.sys} + '%'"></td>
                                </tr>
                                <tr>
                                    <td>当前空闲率</td>
                                    <td id="cpuFree" th:text="${server.cpu.free} + '%'"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">内存</div>
                    <div class="layui-card-body">
                        <table class="layui-table" lay-skin="line">
                            <thead>
                                <tr>
                                    <th>属性</th>
                                    <th>内存</th>
                                    <th>JVM</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>总内存</td>
                                    <td id="memTotal" th:text="${server.mem.total + 'G'}">0GB</td>
                                    <td id="jvmTotal" th:text="${server.jvm.total + 'M'}">0MB</td>
                                </tr>
                                <tr>
                                    <td>已用内存</td>
                                    <td id="memUsed" th:text="${server.mem.used + 'G'}">0GB</td>
                                    <td id="jvmUsed" th:text="${server.jvm.used + 'M'}">0MB</td>
                                </tr>
                                <tr>
                                    <td>剩余内存</td>
                                    <td id="memFree" th:text="${server.mem.free + 'G'}">0GB</td>
                                    <td id="jvmFree" th:text="${server.jvm.free + 'M'}">0MB</td>
                                </tr>
                                <tr>
                                    <td>使用率</td>
                                    <td id="memUsage" th:class="${server.mem.usage gt 80} ? 'text-danger'">[[${server.mem.usage}]]%</td>
                                    <td id="jvmUsage" th:class="${server.jvm.usage gt 80} ? 'text-danger'">[[${server.jvm.usage}]]%</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">服务器信息</div>
                    <div class="layui-card-body">
                        <table class="layui-table" lay-skin="line">
                            <tr>
                                <td>服务器名称</td>
                                <td th:text="${server.sys.computerName}">RuoYi</td>
                                <td>操作系统</td>
                                <td th:text="${server.sys.osName}">Linux</td>
                            </tr>
                            <tr>
                                <td>服务器IP</td>
                                <td th:text="${server.sys.computerIp}">127.0.0.1</td>
                                <td>系统架构</td>
                                <td th:text="${server.sys.osArch}">amd64</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">Java虚拟机信息</div>
                    <div class="layui-card-body">
                        <table class="layui-table" lay-skin="line">
                            <tr>
                                <td>Java名称</td>
                                <td th:text="${server.jvm.name}">Java</td>
                                <td>Java版本</td>
                                <td th:text="${server.jvm.version}">1.8.0</td>
                            </tr>
                            <tr>
                                <td>启动时间</td>
                                <td th:text="${server.jvm.startTime}">2019-04-08 00:00:00</td>
                                <td>运行时长</td>
                                <td id="jvmRunTime" th:text="${server.jvm.runTime}">0天0时0分0秒</td>
                            </tr>
                            <tr>
                                <td colspan="1">安装路径</td>
                                <td colspan="3" th:text="${server.jvm.home}"></td>
                            </tr>
                            <tr>
                                <td colspan="1">项目路径</td>
                                <td colspan="3" th:text="${server.sys.userDir}"></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">磁盘状态</div>
                    <div class="layui-card-body">
                        <table class="layui-table" lay-skin="line">
                            <thead>
                                <tr>
                                    <th>盘符路径</th>
                                    <th>文件系统</th>
                                    <th>盘符类型</th>
                                    <th>总大小</th>
                                    <th>可用大小</th>
                                    <th>已用大小</th>
                                    <th>已用百分比</th>
                                </tr>
                            </thead>
                            <tbody id="diskInfo">
                                <tr th:each="sysFile : ${server.sysFiles}">
                                    <td th:text="${sysFile.dirName}">C:\</td>
                                    <td th:text="${sysFile.sysTypeName}">NTFS</td>
                                    <td th:text="${sysFile.typeName}">local</td>
                                    <td th:text="${sysFile.total}">0GB</td>
                                    <td id="sysFileFree" th:text="${sysFile.free}">0GB</td>
                                    <td id="sysFileUsed" th:text="${sysFile.used}">0GB</td>
                                    <td id="sysFileUsage" th:class="${sysFile.usage gt 80} ? 'text-danger'"  th:text="${sysFile.usage} + '%'"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script th:src="@{/js/jquery.min.js?v=2.1.4}"></script>
    <script th:src="@{/layui/layui.js}"></script>
    <script type="text/javascript">
	    function removeLoading () {
	        $(".page-loading").hide();
	    }
	    
	    setTimeout(function() {
	        removeLoading();
	    },300);
	    
	    function refreshData(){
	    	$.get("/system/info/json",{t:Math.random()},function(re){
				if(re.code==0){
					var data=re.data;
					$("#cpuUsed").text(data.cpu.used+'%');
					setDanger($("#cpuUsed"),data.cpu.used,80);
					$("#cpuSys").text(data.cpu.sys+'%');
					setDanger($("#cpuSys"),data.cpu.sys,80);
					$("#cpuFree").text(data.cpu.free+'%');
					
					$("#memTotal").text(data.mem.total+'G');
					$("#jvmTotal").text(data.jvm.total+'M');
					$("#memUsed").text(data.mem.used+'G');
					$("#jvmUsed").text(data.jvm.used+'M');
					$("#memFree").text(data.mem.free+'G');
					$("#jvmFree").text(data.jvm.free+'M');
					$("#memUsage").text(data.mem.usage+'%');
					setDanger($("#memUsage"),data.mem.usage,80);
					$("#jvmUsage").text(data.jvm.usage+'%');
					setDanger($("#jvmUsage"),data.jvm.usage,80);
					
					$("#jvmRunTime").text(data.jvm.runTime);
					
					for(var i=0;i<data.sysFiles.length;i++){
						var that=$("#diskInfo tr").eq(i);
						$(that).find("#sysFileFree").text(data.sysFiles[i].free);
						$(that).find("#sysFileUsed").text(data.sysFiles[i].used);
						$(that).find("#sysFileUsage").text(data.sysFiles[i].usage+ '%');
						setDanger($(that).find("#sysFileUsage"),data.sysFiles[i].usage,80);
					}
				}
				
				
			})
	    }
	    function setDanger(obj,val,max){
	    	if(val>max){
	    		$(obj).attr("class","text-danger");
	    	}else{
	    		$(obj).attr("class","");
	    	}
	    	
	    }
	    
	    setInterval(refreshData, 5000);
    </script>
</body>
</html>